

<template>
  <div id="login">
    <el-link type="primary" class="buju" @click="Hlogin1">系统账号登录</el-link>
    <el-link type="primary" class="buju1" @click="Hlogin2">首页</el-link>

    <el-form :model="User" style="margin: auto;width: 250px;padding: 200px" >
      <el-form-item label="" class="color">
        <h1 class="threeD" style="color:cornflowerblue ;font-style:italic;font-size: xxx-large">社区系统</h1>
      </el-form-item>
      <el-form-item label="用户名" class="color" >
        <el-input v-model="User.userName" placeholder="账号/手机号"></el-input>
      </el-form-item>
      <el-form-item label="密码" class="color">
        <el-input type="password" v-model="User.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" @click="login">登录</el-button>
        <!--空格-->
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button type="primary" @click="zhuche">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
    name:"login",
  data(){
      return{
          User:{
              userId:"",
              userName:"",
              password:""
          },
          dialogVisible:false,
          designFileForm12:{}//注册表单
      }
  },
  methods:{
    //系统账号登录
    Hlogin1(){
      this.$router.push('/Hlogin')
    },
    Hlogin2(){
      this.$router.push('/Home')
    },
      //注册
      zhuche(){
        //跳转到注册页面
        this.$router.push('/Zhuche')
      }
    ,
    //登录    \
     login(){
        //打印账号密码
       console.log(this.User)
        //传输到后台
        this.$axios.post('/zhuche/login',this.User).then(res => {
          console.log(6666,res.data)
          if(res.data!=(0)){
            this.$message({
              message: '登陆成功',
              type:'success'
            })
            window.sessionStorage.setItem("admin",this.User.userName)
            window.sessionStorage.setItem("userId1",JSON.stringify(res.data))
            this.$router.push('/Home')
          }else{
            this.$message.error('账号或密码错误')
          }
        }).catch(err => {
          console.log(err)
        })

     }
  }
}
</script>
<style>
.color .el-form-item__label{
  color: cornflowerblue;
}
#login {
  background: url("images/1.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: cover;
}
.threeD{
  font-size:80px; /*设置字体大小*/
  font-weight:800; /*设置字体粗细*/
  text-shadow:1px 0px #009916, 1px 2px #006615, 3px 1px #009916,
  2px 3px #006615, 4px 2px #009916, 4px 4px #006615,
  5px 3px #009916, 5px 5px #006615, 7px 4px #009916,
  6px 6px #006615, 8px 5px #009916, 7px 7px #006615,
  9px 6px #009916, 9px 8px #006615, 11px 7px #009916/*设置文字阴影*/
}
.buju{
  display: flex;
  justify-content: flex-end;
  float: right;
}
.buju1{
  display: flex;
  justify-content: flex-end;
  float: left;
}
</style>